<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--bootstrap-->
    <link href="/shop-app/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/shop-app/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/shop-app/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入HttpUtil.js -->
    <script src="/shop-app/js/HttpUtil.js"></script>
    <!--引入存到浏览器的js文件-->
    <script src="/shop-app/js/UserCacheUtil.js"></script>
    <!-- 界面报icon找不到问题 -->
    <link rel="shortcut icon" href="#"/>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2  col-lg-8 col-lg-offset-2" style="margin-top: 50px">
            <div class="alert btn-info text-center" role="alert" style="font-size: 30px">登录
                <button id="label-btn-top" onclick="changeShowDiv()" type="button"
                        class="btn btn-success col-lg-offset-5 col-md-offset-5 col-xs-offset-5" >切换短信验证</button>
            </div>
        </div>
    </div>
</div>


<!-- 账号密码验证 -->
<div class="container" id="div-hide-by-password">
    <div class="row">
        <div class="col-md-8 col-md-offset-2  col-lg-8 col-lg-offset-2 ">
            <form class="form-horizontal">

                <div class="form-group">
                    <label class="col-sm-3 ol-lg-3 control-label">用户名</label>
                    <div class="col-sm-7 col-lg-7">
                        <input id="passwordName" type="text" class="form-control" placeholder="userName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-7">
                        <input id="uPassword" name="uPassword" type="password" class="form-control"
                               placeholder="Password">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">验证码</label>
                    <div class="col-sm-7 col-lg-7">
                        <input id="vcode" name="vcode" type="text" class=" form-inline" placeholder="验证码"
                               style="display: inline-block">

                        <img id="kaptchaImage" src="http://localhost:8080/shop-api/code/getImg" width="116" height="36"
                             style="display: inline-block">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-8 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="passwordCheckLogin"> 免登录
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1  col-sm-12">
                        <button onclick="passwordLogin()" type="button" class="btn btn-default btn btn-info"
                                style="width: 120px">密码登录
                        </button>
                        <button type="reset" class="btn btn-default col-sm-offset-3 btn btn-warning"
                                style="width: 120px">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 短信验证 -->
<div class="container" id="div-hide-by-sms" style="display: none">
    <div class="row">
        <div class="col-md-8 col-md-offset-2  col-lg-8 col-lg-offset-2 ">
            <form class="form-horizontal">

                <div class="form-group">
                    <label class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-7">
                        <input id="smsName" type="text" class="form-control" placeholder="userName">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">电话</label>
                    <div class="col-sm-7">
                        <input id="uPhone" name="uPhone" type="text" class="form-control" placeholder="telephone">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">短信验证</label>
                    <div class="col-sm-7">
                        <input id="noteCode" name="noteCode" type="text" class="= form-inline" placeholder="验证码">
                        <button type="button" id="noteCodeBtn" onclick="submitSms()" class="btn btn-info">获取短信验证码
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-8 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="smsCheckLogin"> 免登录
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1  col-sm-12">
                        <button onclick="smsLogin()" type="button" class="btn btn-default btn btn-info"
                                style="width: 120px">短信登录
                        </button>
                        <button type="reset" class="btn btn-default col-sm-offset-3 btn btn-warning"
                                style="width: 120px">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script>



    //发送短信验证
    function submitSms() {
        //ajax 请求后台发送短信
        let url = "/user/submitSms";
        // let url = "/user/submitSmsNo";
        let params = {
            uName: $("#smsName").val(),
            uPhone: $("#uPhone").val(),
        };
        console.log(params);
        //设置按钮不可点击
        $('#noteCodeBtn').attr('disabled', true);
        httpPostApi(url, params, function (data) {
            //短信发送成功
            alert(data)
        });
        // location.href = "/shop-app/index.html";
    }

    //sms短信登录按钮函数
    function smsLogin() {
        //ajax 请求后台登录用户
        let url = "/user/smsLogin";
        let params = {
            uName: $("#smsName").val(),
            uPhone: $("#uPhone").val(),
            noteCode: $("#noteCode").val(),
        };

        httpPostApi(url, params, function (data) {
            console.log(data);
            //将信息存入 浏览器session 中
            if ($("#smsCheckLogin")[0].checked) {
                //选中存在本地
                saveLocalData("loginUser", data);
            } else {
                saveSessionData("loginUser", data);
            }
            //请求注册成功转跳到首页
            location.href = "/shop-app/index.html";
        });
    }

    //password登录函数
    function passwordLogin() {
        //ajax 请求后台登录用户
        let url = "/user/passwordLogin";
        let params = {
            uName: $("#passwordName").val(),
            uPassword: $("#uPassword").val(),
            vcode: $("#vcode").val(),
        };

        console.log(params);

        httpPostApi(url, params, function (data) {
            console.log(data);

            //将信息存入 浏览器session 中
            if ($("#passwordCheckLogin")[0].checked) {
                //选中存在本地
                saveLocalData("loginUser", data);
            } else {
                saveSessionData("loginUser", data);
            }
            //请求注册成功转跳到首页
            location.href = "/shop-app/index.html";
        });
    }

    //等待页面加载完成
    $(function () {
        //验证码图片切换
        $('#kaptchaImage').click(function () {
            $(this).hide().attr('src', appendApiUrl("/code/getImg?") + Math.floor(Math.random() * 100)).fadeIn();
            event.cancelBubble = true;
        });

        //一开始让发短信的隐藏
        // $('#div-hide-by-sms').hide();

        $("#smsCheckLogin").click(function () {
            console.log(this.checked);
        })

    });


    let flag = true;
    function changeShowDiv() {
        flag =!flag;
        if (flag) {
            $('#div-hide-by-sms').hide();
            $('#div-hide-by-password').show();
            $('#label-btn-top').html("切换短信验证");
        } else {
            $('#div-hide-by-sms').show();
            $('#div-hide-by-password').hide();
            $('#label-btn-top').html("切换密码验证");
        }
    }


</script>

</body>
</html>